import React, { memo } from 'react'
import type { ReactNode } from 'react'
import { AreaHeaderWrapper } from './style'
import { Link } from 'react-router-dom'

interface Iprops {
    children?: ReactNode
    title: string
    keywords?: string[]
    moreLink?: string
}

const AreaHeader: React.FC<Iprops> = (props) => {
    const { title, moreLink = '/', keywords = [] } = props

    return (
        <AreaHeaderWrapper>
            <div className="left">
                <div className="icon-left"></div>
                <h3>{title}</h3>
                <div className="keywords">
                    {keywords.map((item) => {
                        return (
                            <div className="item" key={item}>
                                <span className="text">{item}</span>
                                <span className="divider">|</span>
                            </div>
                        )
                    })}
                </div>
            </div>
            <div className="right">
                <Link className="more" to={moreLink}>
                    更多
                </Link>
                <div className="icon-right"></div>
            </div>
        </AreaHeaderWrapper>
    )
}

export default memo(AreaHeader)
